<!--
 * @Author: Damon Liu
 * @Date: 2025-04-07 10:59:20
 * @LastEditors: Damon Liu
 * @LastEditTime: 2025-04-09 13:46:46
 * @Description:  用于被标记是否砸中的元素
-->
<template>
    <div :class="['target-el-ctn', isAttacked ? 'attcked-target-ctn' : ''] " @click="handleClick">
        {{  !isAttacked ? '未命中' : '命中！'  }}
    </div>
</template>

<script setup>
import { ref } from 'vue'
const isAttacked = ref(false);  // 是否被命中
const handleClick = (event) => {
    console.log(event)
    if(event.detail === 1002) {
        // 当事件为扔番茄击中时停止冒泡
        // 但其实不停止也无所谓，在最顶层的时候做判断也一个样
        event.stopPropagation();
        isAttacked.value = true
    }
}
</script>

<style lang="less" scoped>
.target-el-ctn {
    border: 1px solid #eee;
    color: #fff;
    background: #7bcda8;
    user-select: none;
}
.attcked-target-ctn {
    background: #42b883;
    color: #fff;
}
</style>